<template>
  <div class="co_channels_list">
    <div class="search-box">
      <Row type="flex" justify="space-between">
        <Row type="flex">
          <Col class="search-item">
            <span class="search-label">合作渠道名称:</span>
            <Input
              v-model="pageObj.channelName"
              suffix="ios-search"
              search
              @on-keyup="filterSpace"
              @on-search="search"
              :maxlength="30"
              placeholder="请输入"
            ></Input>
          </Col>
          <Col class="search-item">
            <span class="search-label">合作方名称:</span>
            <Input
              v-model="pageObj.partnerName"
              suffix="ios-search"
              search
              @on-keyup="filterSpace"
              @on-search="search"
              :maxlength="30"
              placeholder="请输入"
            ></Input>
          </Col>
        </Row>
        <Row>
          <Col class="search-item" style="margin-right:30px;">
            <Button
              class="search-btn"
              type="primary"
              @click="doSearch"
              v-if="hasPermission('moms:globalsetting:partnerchannelcreate')"
            >添加</Button>
          </Col>
        </Row>
      </Row>
    </div>
    <Table
      :loading="loading"
      :height="this.tableHeight"
      ref="selection"
      :columns="columns"
      :data="partyList"
      stripe
      class="table-list"
    >
      <template slot-scope="{ row, index }" slot="action">
        <i
          class="iconsys icondetail"
          @click="look(row,index)"
          title="查看详情"
          v-if="hasPermission('moms:globalsetting:partnerchanneldetail')"
        ></i>
        <i
          class="iconsys iconedit"
          @click="uptShow(row,index)"
          title="编辑"
          v-if="hasPermission('moms:globalsetting:partnerchannelupdate')"
        ></i>
        <Poptip
          confirm
          title="你确定要删除吗？"
          @on-ok="ok(row, index)"
          @on-cancel="cancel"
          class="poptip_del"
        >
          <i
            class="iconsys icondel"
            title="删除"
            v-if="hasPermission('moms:globalsetting:partnerchanneldelete')"
          ></i>
        </Poptip>
      </template>
    </Table>
    <div class="page-box">
      <Page
        :total="pageObj.total"
        :page-size="pageObj.pageSize"
        :current="pageObj.pageIndex"
        :page-size-opts="[10, 20, 50, 100]"
        show-total
        show-sizer
        @on-change="changePageIndex"
        @on-page-size-change="changePageSize"
      />
    </div>
  </div>
</template>
<script>
import { getChannelList, delChannelList } from '@/api/system/fishing.js'
import { mapState } from 'vuex'
export default {
  name: 'cooperation_channels_list',
  data () {
    return {
      searchObj: {
        Name: ''
      },
      loading: false,
      tableHeight: 0,
      pageObj: {
        channelName: '',
        partnerName: '',
        pageIndex: 1,
        pageSize: 10,
        total: 0
      },
      columns: [
        {
          title: 'ID',
          key: 'channelId',
          align: 'center'
        },
        {
          title: '合作渠道名称',
          key: 'channelName',
          align: 'center'
        },
        {
          title: '合作方名称',
          key: 'partnerName',
          align: 'center'
        },
        {
          title: '最后操作时间',
          key: 'updatedAt',
          align: 'center'
        }
      ],
      partyList: []
    }
  },
  watch: {
    '$route' (newRoute) {
      if (newRoute.name === 'cooperation_channels_list') {
        this.pageObj.pageIndex = 1
        this.getList()
      }
    }
  },
  mounted () {
    this.getList()
    if (this.hasPermission(['moms:globalsetting:partnerchanneldetail', 'moms:globalsetting:partnerchannelupdate', 'moms:globalsetting:partnerchanneldelete'])) {
      this.columns.push({
        title: '操作',
        width: 200,
        slot: 'action'
      })
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId,
      userId: state => state.user.userId,
      userName: state => state.user.userName
    })
  },
  methods: {
    doSearch () {
      this.$router.push({ name: 'cooperation_channels_create' })
    },
    getList () {
      this.loading = true
      getChannelList({
        merchantId: this.merchantId,
        channelStatus: 0,
        channelName: this.pageObj.channelName,
        partnerName: this.pageObj.partnerName,
        offset: (this.pageObj.pageIndex - 1) * this.pageObj.pageSize,
        limit: this.pageObj.pageSize
      }).then(res => {
        this.loading = false
        if (res.data.status === 200) {
          this.partyList = res.data.data
          this.pageObj.total = res.data.totalCount
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    filterSpace () {
      // this.pageObj.channelName = this.pageObj.channelNam ? this.pageObj.channelName.replace(/\s+/g, '') : ''
      // this.pageObj.partnerName = this.pageObj.partnerName ? this.pageObj.partnerName.replace(/\s+/g, '') : ''
    },
    look (row) {
      this.$router.push({ name: 'cooperation_channels_detail', query: { id: row.channelId } })
    },
    uptShow (row) {
      this.$router.push({ name: 'cooperation_channels_edit', query: { id: row.channelId } })
    },
    search () {
      this.pageObj.pageIndex = 1
      this.getList()
    },
    ok (row) {
      delChannelList({
        merchantId: this.$store.state.user.merchantId,
        channelId: row.channelId,
        updater: this.$store.state.user.userId,
        updaterName: this.$store.state.user.userName
      }).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('删除成功')
          this.getList()
          if (this.pageObj.total % this.pageObj.pageSize === 1) {
            if (this.pageObj.pageIndex > 1) {
              this.pageObj.pageIndex--
              this.getList()
            }
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    cancel () { },
    changePageIndex (index) {
      this.pageObj.pageIndex = index
      this.getList()
    },
    changePageSize (size) {
      this.pageObj.pageSize = size
      this.pageObj.pageIndex = 1
      this.getList()
    }
  }
}
</script>
<style lang="less">
.co_channels_list .ivu-poptip-confirm .ivu-poptip-body .ivu-icon {
  left: 10px;
}
</style>
